<template>
	<view class="img-card">
		<div class="img" :style="{marginBottom: margin(index) ? '0' : '60upx' }" v-for="(img, index) in list" :key="index" @click="viewImg(img,index)">
			<view class="image">
				<image :src="img.img" mode=""></image>
			</view>
			<view class="img-info">
				<text class="title">{{img.title}}</text>
				<view class="detail">
					<text>{{img.author}}</text>
					<view class="download">
						<image :src="downloadIcon" mode=""></image>
						<text>{{img.downloadNum}}</text>
					</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	import { download_icon } from '@/static/svg/index.js'
	export default {
		name: 'ImgCard',
		props: {
			list: {
				type: Object | Array
			}
		},
		data () {
			return {
				downloadIcon: download_icon
			}
		},
		methods: {
			margin (index) {
				let len = this.list.length
				if ((index === len - 1) || (index == len -2 )) {
					return true
				} else {
					return false
				}
			},
			viewImg (item, index) {
				console.log('详情')
				uni.navigateTo({
					url: `/pages/img-detail/img-detail?id=${item.id}`,
					animationDuration: 300
				})
			}
		},
		computed: {
			
		}
	}
</script>

<style lang="less" scoped>
	.img-card {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		padding: 40upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.img:nth-child(odd) {
			margin-right: 20upx;
		}
		.img:nth-child(even) {
			margin-right: 0upx;
		}
		.img {
			.image {
				width: 100%;
				image {
					width: 100%;
					min-height: 300upx;
					max-height: 100%;
					border-radius: 16upx;
				}
			}
			.img-info {
				width: 324upx;
				display: flex;
				flex-direction: column;
				.title {
					color: rgba(16, 16, 16, 100);
					font-size: 32upx;
				}
				.detail {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					text {
						width: 194upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: rgba(223, 223, 223, 100);
						font-size: 28upx;
					}
					.download {
						image {
							width: 24upx;
							height: 24upx;
						}
					}
				}
			}
		}
		
	}
</style>
